<template>
  <div class="order">
    <el-tabs v-model="activeName">
      <el-tab-pane label="订单处理" name="first" style="color: #fff">
        <h1>订单处理</h1>
        <el-table
          :data="
            tableData.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column label="订单编号" prop="work_id" width="80">
          </el-table-column>
          <el-table-column label="工作开始时间" prop="date"> </el-table-column>
          <el-table-column label="雇主姓名" prop="name" width="80">
          </el-table-column>
          <el-table-column label="雇主住址" prop="address"> </el-table-column>
          <el-table-column label="订单状态" prop="state" width="80">
          </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >接单</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >拒绝接单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next, jumper,total"
          @current-change="handleCurrentChange"
          :page-size="pagesize"
          :total="tableData.length"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="可接公告订单" name="second"
        ><h1 class="c">可接公共订单</h1>
        <el-table
          :data="
            tableData2.filter(
              (data) =>
                !search ||
                data.name.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column label="订单编号" prop="work_id" width="80">
          </el-table-column>
          <el-table-column label="工作开始时间" prop="date" width="200"> </el-table-column>
          <el-table-column label="雇主姓名" prop="name" width="80">
          </el-table-column>
          <el-table-column label="雇主住址" prop="address" width="200"> </el-table-column>
          <el-table-column label="订单状态" prop="state" width="80">
          </el-table-column>
          <el-table-column align="right">
            <template slot="header" slot-scope="scope">
            地区选择:
              <el-cascader
                size="mini"
                :options="options"
                v-model="selectedOptions"
                @change="handleChange"
              >
              </el-cascader>
              <el-button
                type="primary"
                style="margin-left: 10px"
                @click="searchBtn"
                size="mini"
                >查找</el-button
              >
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit2(scope.$index, scope.row)"
                >接单</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next, jumper,total"
          @current-change="handleCurrentChange"
          :page-size="pagesize"
          :total="tableData2.length"
        >
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="已处理订单" name="third"
        ><h1 class="c">已处理订单</h1>
        <agent
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import agent from "./agent";
import { regionData, CodeToText } from "element-china-area-data";
export default {
  components: {
    agent,
  },
  data() {
    return {
      activeName: "first",
      pagesize: 10,
      currpage: 1,
      tableData: [],
      tableData2: [],
      search: "",
      orderList: {
        date: "", //下单时间
        name: "", //雇主姓名
        address: "", //雇主住址
        work_id: "", //订单编号
        state: "",
      },
      // value2: "",
      options: regionData,
      selectedOptions: [],
      form: {
        province: "",
        city: "",
      },
    };
  },

  // this.myaxios({
  //         url:'http://housekeepi.com/api/workModify',
  //         method:'post',
  //         data:{
  //             token:tkoen,
  //             state:
  //             work_id
  //         }
  //     }).then((res)=>{

  //     },()=>{}).catch(()=>{}) //Promise

  mounted() {
    var tkoen = window.localStorage.getItem("token");
    this.myaxios({
      url: "http://housekeepi.com/api/workList",
      method: "post",
      data: {
        token: tkoen,
        user_type: "2",
        work: "0",
      },
    })
      .then(
        (res) => {
          console.log(res.data.data);
          for (let i = 0; i < res.data.data.length; i++) {
            this.orderList = {};
            this.orderList.date = new Date(
              res.data.data[i].start_time * 1000
            ).toLocaleString();
            this.orderList.name = res.data.data[i].work_user[0].nick_name;
            this.orderList.address =
              res.data.data[i].province +
              res.data.data[i].city +
              res.data.data[i].area +
              res.data.data[i].address;
            this.orderList.work_id = res.data.data[i].work_id;
            if (res.data.data[i].state == 1) {
              this.orderList.state = "等待处理";
              this.tableData.push(this.orderList);
            } else {
              // console.log(1);
            }
          }
        },
        () => {}
      )
      .catch(() => {}); //Promise

    this.myaxios({
      url: "http://housekeepi.com/api/TaskList",
      method: "post",
      data: {
        page: "1",
        size: "10",
        province: "四川省",
        city: "成都市",
        work_type: localStorage.getItem("worktype")
      },
    })
      .then(
        (res) => {
          console.log(res.data.data.data);
          for (let i = 0; i < res.data.data.data.length; i++) {
            this.orderList = {};
            console.log(res.data.data.data[i].work_id);
            this.orderList.work_id = res.data.data.data[i].work_id;
            console.log(res.data.data.data[i].start_time);
            this.orderList.date = new Date(
              res.data.data.data[i].start_time * 1000
            ).toLocaleString();
            console.log(res.data.data.data[i].address);
            this.orderList.address =
              res.data.data.data[i].province +
              res.data.data.data[i].city +
              res.data.data.data[i].area +
              res.data.data.data[i].address;
            console.log(res.data.data.data[i].nick_name);
            this.orderList.name = res.data.data.data[i].nick_name;
            console.log(res.data.data.data[i].state);
            this.orderList.state = "可接受";
            this.tableData2.push(this.orderList);
          }
        },
        () => {}
      )
      .catch(() => {}); //Promise
  },
  methods: {
    handleEdit(index, row) {
      console.log(row);
      var tkoen = window.localStorage.getItem("token");
      this.myaxios({
        url: "http://housekeepi.com/api/workModify",
        method: "post",
        data: {
          token: tkoen,
          work: "工作人员",
          state: "4",
          work_id: String(row.work_id),
        },
      })
        .then(
          (res) => {
            var tkoen = window.localStorage.getItem("token");
            this.myaxios({
              url: "http://housekeepi.com/api/workList",
              method: "post",
              data: {
                token: tkoen,
                user_type: "2",
                work: 0,
              },
            })
              .then(
                (res) => {
                  console.log(res.data.data);
                  this.tableData = [];
                  for (let i = 0; i < res.data.data.length; i++) {
                    this.orderList = {};
                    console.log("下单时间");
                    console.log(res.data.data[i].start_time);
                    console.log(
                      new Date(
                        res.data.data[i].start_time * 1000
                      ).toLocaleString()
                    );
                    this.orderList.date = new Date(
                      res.data.data[i].start_time * 1000
                    ).toLocaleString();
                    console.log("雇主姓名");
                    console.log(res.data.data[i].work_user[0].nick_name);
                    this.orderList.name =
                      res.data.data[i].work_user[0].nick_name;
                    console.log("雇主住址");
                    console.log(
                      res.data.data[i].province +
                        res.data.data[i].city +
                        res.data.data[i].area +
                        res.data.data[i].address
                    );
                    this.orderList.address =
                      res.data.data[i].province +
                      res.data.data[i].city +
                      res.data.data[i].area +
                      res.data.data[i].address;
                    console.log("订单编号");
                    console.log(res.data.data[i].work_id);
                    this.orderList.work_id = res.data.data[i].work_id;
                    console.log(this.orderList);
                    if (res.data.data[i].state == 1) {
                      this.orderList.state = "等待处理";
                      this.tableData.push(this.orderList);
                    } else {
                      console.log(1);
                    }
                  }
                },
                () => {}
              )
              .catch(() => {}); //Promise
          },
          () => {}
        )
        .catch(() => {}); //Promise
    },
    handleEdit2(index, row) {
      console.log(row);
      var tokenn = window.localStorage.getItem("token");
      this.myaxios({
        url: "http://housekeepi.com/api/getTask",
        method: "post",
        data: {
          token: tokenn,
          work_id: row.work_id,
        },
      })
        .then(
          (res) => {
            console.log(res.data);
            this.myaxios({
              url: "http://housekeepi.com/api/TaskList",
              method: "post",
              data: {
                page: "1",
                size: "10",
                province: "四川省",
                city: "成都市",
                work_type: "2",
              },
            })
              .then(
                (res) => {
                  console.log(res.data.data.data);
                  this.tableData2 = [];
                  for (let i = 0; i < res.data.data.data.length; i++) {
                    this.orderList = {};
                    console.log(res.data.data.data[i].work_id);
                    this.orderList.work_id = res.data.data.data[i].work_id;
                    console.log(res.data.data.data[i].start_time);
                    this.orderList.date = new Date(
                      res.data.data.data[i].start_time * 1000
                    ).toLocaleString();
                    console.log(res.data.data.data[i].address);
                    this.orderList.address =
                      res.data.data.data[i].province +
                      res.data.data.data[i].city +
                      res.data.data.data[i].area +
                      res.data.data.data[i].address;
                    console.log(res.data.data.data[i].nick_name);
                    this.orderList.name = res.data.data.data[i].nick_name;
                    console.log(res.data.data.data[i].state);
                    this.orderList.state = "可接受";
                    this.tableData2.push(this.orderList);
                  }
                },
                () => {}
              )
              .catch(() => {}); //Promise
          },
          () => {}
        )
        .catch(() => {}); //Promise
    },
    handleDelete(index, row) {
      console.log(row);
      var tkoen = window.localStorage.getItem("token");
      this.myaxios({
        url: "http://housekeepi.com/api/workModify",
        method: "post",
        data: {
          token: tkoen,
          work: "工作人员",
          state: "3",
          work_id: String(row.work_id),
        },
      })
        .then(
          (res) => {
            var tkoen = window.localStorage.getItem("token");
            this.myaxios({
              url: "http://housekeepi.com/api/workList",
              method: "post",
              data: {
                token: tkoen,
                user_type: "2",
                work: 0,
              },
            })
              .then(
                (res) => {
                  console.log(res.data.data);
                  this.tableData = [];
                  for (let i = 0; i < res.data.data.length; i++) {
                    this.orderList = {};
                    console.log("下单时间");
                    console.log(res.data.data[i].start_time);
                    console.log(
                      new Date(
                        res.data.data[i].start_time * 1000
                      ).toLocaleString()
                    );
                    this.orderList.date = new Date(
                      res.data.data[i].start_time * 1000
                    ).toLocaleString();
                    console.log("雇主姓名");
                    console.log(res.data.data[i].work_user[0].nick_name);
                    this.orderList.name =
                      res.data.data[i].work_user[0].nick_name;
                    console.log("雇主住址");
                    console.log(
                      res.data.data[i].province +
                        res.data.data[i].city +
                        res.data.data[i].area +
                        res.data.data[i].address
                    );
                    this.orderList.address =
                      res.data.data[i].province +
                      res.data.data[i].city +
                      res.data.data[i].area +
                      res.data.data[i].address;
                    console.log("订单编号");
                    console.log(res.data.data[i].work_id);
                    this.orderList.work_id = res.data.data[i].work_id;
                    console.log(this.orderList);
                    if (res.data.data[i].state == 1) {
                      this.orderList.state = "等待处理";
                      this.tableData.push(this.orderList);
                    } else {
                      console.log(1);
                    }
                  }
                },
                () => {}
              )
              .catch(() => {}); //Promise
          },
          () => {}
        )
        .catch(() => {}); //Promise
    },
    handleCurrentChange() {},
    handleChange(value) {
      this.form.province = CodeToText[value[0]];
      this.form.city = CodeToText[value[1]];
      // this.form.area = CodeToText[value[2]];
    },
    searchBtn() {
      this.myaxios({
        url: "http://housekeepi.com/api/TaskList",
        method: "post",
        data: {
          page: "1",
          size: "10",
          province: this.form.province,
          city: this.form.city,
          work_type: localStorage.getItem("worktype"),
        },
      })
        .then(
          (res) => {
            console.log(res.data.data.data);
            this.tableData2 = [];
            for (let i = 0; i < res.data.data.data.length; i++) {
              this.orderList = {};
              console.log(res.data.data.data[i].work_id);
              this.orderList.work_id = res.data.data.data[i].work_id;
              console.log(res.data.data.data[i].start_time);
              this.orderList.date = new Date(
                res.data.data.data[i].start_time * 1000
              ).toLocaleString();
              console.log(res.data.data.data[i].address);
              this.orderList.address =
                res.data.data.data[i].province +
                res.data.data.data[i].city +
                res.data.data.data[i].area +
                res.data.data.data[i].address;
              console.log(res.data.data.data[i].nick_name);
              this.orderList.name = res.data.data.data[i].nick_name;
              console.log(res.data.data.data[i].state);
              this.orderList.state = "可接受";
              this.tableData2.push(this.orderList);
            }
          },
          () => {}
        )
        .catch(() => {}); //Promise
    },
  },
};
</script>

<style scoped>
* {
  text-align: center;
}
.order {
  width: 85%;
  margin: 0 auto;
  padding-bottom: 10px;
  min-height: 700px;
}
.c {
  /* margin-top: 30px; */
}
h1 {
  display: inline-block;
  background-color: rgb(240, 249, 235);
  border-left: 8px solid rgb(0, 255, 127);
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 3px;
  color: rgb(103, 194, 58);
  font-weight: normal;
  margin-bottom: 20px;
}
.el-tabs__item {
  color: #fff;
}
</style>